<template>
	<view class="content verification">
		<!-- <view class="verification-tabs">
			<view
				class="verification-tabs-tab"
				:class="{ 'verification-tabs-selected': active === 0 }"
				@click="active = 0"
			>
				DNS 验证
			</view>
			<view
				class="verification-tabs-tab"
				:class="{ 'verification-tabs-selected': active === 1 }"
				@click="active = 1"
			>
				文本验证
			</view>
		</view> -->
		<uni-forms
			v-for="(domain, index) in domainList"
			:key="index"
			class="verification-forms"
			:label-width="80"
		>
			<uni-forms-item label="记录类型">
				<view class="verification-cell" @click="onCopy(domain.recordType)">
					{{ domain.recordType }}
				</view>
			</uni-forms-item>
			<uni-forms-item label="主机值">
				<view class="verification-cell" @click="onCopy(domain.hostRecord)">
					{{ domain.hostRecord }}
				</view>
			</uni-forms-item>
			<uni-forms-item label="记录值">
				<view class="verification-cell" @click="onCopy(domain.hashValue)">
					{{ domain.hashValue }}
				</view>
			</uni-forms-item>
		</uni-forms>
		<uni-collapse>
			<uni-collapse-item title="手册">
				<view class="verification-handbook">
					<image
						src="https://apiserver/upload/handbook.jpg"
						mode="widthFix"
					></image>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<button
			type="primary"
			style="margin-top: 16px; background-color: #007aff"
			@click="onClick"
		>
			校验配置
		</button>
	</view>
</template>

<script>
import { toast } from '../../../utils/native'
import {
	getOrderDetail,
	getCertificatesDomains,
	certificatesVerifyDomains
} from '../../../api/order/index.js'
export default {
	data() {
		return {
			active: 0,

			detail: {},

			domainList: []
		}
	},

	computed: {},

	methods: {
		onClick() {
			certificatesVerifyDomains(this.detail.id, this.detail.orderNo).then(
				() => {
					uni.showModal({
						title: '温馨提示',
						content: '验证域名成功',
						showCancel: false,
						success() {
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}
					})
				}
			)
		},

		onCopy(data) {
			uni.setClipboardData({
				data,
				success: function () {
					toast('已复制')
				}
			})
		},

		initData(id) {
			getOrderDetail(id).then((data) => {
				console.log(data, 'orderDetail')
				this.detail = data
				if (data.status === 0) {
					uni.showModal({
						title: '温馨提示',
						content: '暂未收到支付成功通知',
						confirmText: '重试',
						cancelText: '返回上一页',
						success: (res) => {
							if (res.confirm) {
								this.initData(id)
							} else if (res.cancel) {
								uni.navigateBack()
							}
						}
					})
				} else {
					getCertificatesDomains(data.orderNo).then((data1) => {
						console.log(data1, 'getCertificatesDomains')
						this.domainList = data1.domainList
					})
				}
			})
		}
	},

	onLoad(option) {
		console.log(option.id)
		this.initData(option.id)
	}
}
</script>

<style lang="scss" scoped>
.verification {
	&-tabs {
		display: flex;
		border: 1px solid #ddd;

		&-tab {
			flex: 1;
			text-align: center;
			padding: 8px 0;
			font-size: 16px;
			font-weight: bold;
			background-color: white;
		}

		&-selected {
			background-color: #007aff;
			color: white;
		}
	}

	&-forms {
		padding: 0 16px;
		background-color: white;
		margin-top: 8px;
	}

	&-cell {
		height: 100%;
		display: flex;
		align-items: center;
		word-break: break-all;
		color: #007aff;
	}

	&-handbook {
	}
}
</style>
